import React, { useState, useEffect } from "react";
import { Card, Tabs, Button, Pagination, Input, Select, Row, Col, Form, Modal, Tag, Cascader, message } from 'antd';
import { PageHeaderWrapper } from "@ant-design/pro-layout"
import { UnorderedListOutlined } from '@ant-design/icons'
import styles from './index.less'
import request from '@/utils/request'
import TableRow from './row'
import SearchForm from './search'
const { TabPane } = Tabs;


const statusList = [
  {
    title: "全部",
    status: "0"
  },
  {
    title: "待支付",
    status: "1"
  },
  {
    title: "待发货",
    status: "2"
  },
  {
    title: "已发货",
    status: "3"
  },
  {
    title: "已收货",
    status: "4"
  },
  {
    title: "已完成",
    status: "5"
  },
  {
    title: "已关闭",
    status: "6"
  },
];

export default () => {

  const [tableData, setTableData] = useState({ list: [], total: 0 })
  const [status, setStatus] = useState("0");
  const [visable, setViable] = useState(false)

  const [form] = Form.useForm()
  const [current, setCurrent] = useState(1)

  const getList = (params: any = {}) => {
    request(`/order/list`, { params: { pageSize: 10, current, status, ...params } }).then((result) => {
      const { list, total } = result.data
      setTableData({ list, total })
    })
  }

  useEffect(() => {
    getList()
  }, [])

  return (
    <PageHeaderWrapper title={false}>
      <Card bordered={false}>
        <SearchForm form={form} getList={getList} />
        <Tabs defaultActiveKey="0" onChange={(activeKey) => {
          setStatus(activeKey)
          form.submit()
        }}>
          {
            statusList.map((item) =>
              <TabPane key={item.status} tab={item.title} style={{ outline: "none" }}>
                {item.status === status &&
                  <>
                    <table className={styles.orderTable}>
                      <colgroup>
                        <col />
                        <col />
                        <col style={{ width: "10%" }} />
                        <col />
                        <col style={{ width: "10%" }} />
                        <col />
                      </colgroup>
                      <thead style={{ backgroundColor: "#F7F7F7", fontWeight: 600 }}>
                        <tr>
                          <td>商品信息</td>
                          <td>单价/数量</td>
                          <td style={{ textAlign: "center" }}>实付金额</td>
                          <td>收货信息</td>
                          <td style={{ textAlign: "center" }}>交易状态</td>
                          <td style={{ textAlign: "center" }}>操作</td>
                        </tr>
                      </thead>
                      <tbody>
                        {
                          tableData.list.length === 0 && <tr>
                            <td colSpan={6} style={{ textAlign: "center", color: "#c2c2c2" }}>
                              <div>暂无订单</div>
                            </td>
                          </tr>
                        }
                        {
                          tableData.list.map((item: any, inx: number) => <TableRow key={inx} item={item} />)
                        }
                      </tbody>
                    </table>
                    {
                      tableData.list.length !== 0 && <Pagination defaultPageSize={10} current={current} total={tableData.total} onChange={(page, pageSize) => {
                        setCurrent(page)
                        form.submit()
                      }} />
                    }
                  </>
                }
              </TabPane>
            )
          }
        </Tabs>
      </Card>
    </PageHeaderWrapper>
  )
}
